Completed
Push — master ( 173bd3...907561 )
by Ankit
03:41
created

message.js ➔ toConversation   A

Complexity

Conditions 1
Paths 1

Size

Total Lines 7

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
cc 1
nc 1
nop 0
dl 0
loc 7
rs 9.4285
c 0
b 0
f 0
1
2
// Websocket Connection Open
3
var conn = new WebSocket("ws://localhost:8080");
0 ignored issues
show
Bug introduced by
The variable WebSocket seems to be never declared. If this is a global, consider adding a /** global: WebSocket */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
4
5
// For send Message to Web Socket Server
6
function sendTo(data)
7
{
8
  conn.send(JSON.stringify(data));
9
}
10
11
// For First time
12
function init()
13
{
14
  var msg = {
15
    "type": "OpenChat initiated..!"
16
  };
17
  sendTo(msg);
18
}
19
20
conn.onopen = function() {
21
  console.log("Connection established!");
0 ignored issues
show
Debugging Code introduced by
console.log looks like debug code. Are you sure you do not want to remove it?
Loading history...
22
  init();
23
};
24
25
// SideBar Load Request
26
function sidebarRequest()
27
{
28
  var msg = {
29
    "type": "Load Sidebar"
30
  };
31
  sendTo(msg);
32
}
33
34
// Create Sidebar
35
function createSidebarElement(data, eleId)
36
{
37
  // organising content according to time
38
  $("#"+eleId).html("");
39
  var condition = data.length;
40
  for (var i = 0; i < condition; i++)
41
  {
42
43
    var div1 = $("<div></div>").addClass("row sideBar-body");
44
45
    div1.attr({
46
      "id" : data[i].username
47
    });
48
49
    var div2 = $("<div></div>").addClass("col-sm-3 col-xs-3 sideBar-avatar");
50
    var div3 = $("<div></div>").addClass("avatar-icon");
51
    var imgElement = $("<img>").attr({
52
      "src": "../public/assests/img/bg.png"
53
    });
54
    div3.append(imgElement);
55
    div2.append(div3);
56
    div1.append(div2);
57
58
    div2 = $("<div></div>").addClass("col-sm-9 col-xs-9 sideBar-main");
59
    div3 = $("<div></div>").addClass("row");
60
    var div4 = $("<div></div>").addClass("col-sm-8 col-xs-8 sideBar-name");
61
    var spanE = $("<span></span>").addClass("name-meta").text(data[i].name);
62
    div4.append(spanE);
63
    div3.append(div4);
64
65
    div4 = $("<div></div>").addClass("col-sm-4 col-xs-4 pull-right sideBar-time");
66
    spanE = $("<span></span>").addClass("time-meta pull-right").text(data[i].time);
67
     div4.append(spanE);
68
    div3.append(div4);
69
    div2.append(div3);
70
71
    div1.append(div2);
72
    $("#"+eleId).append(div1);
73
74
    if(eleId === "message" && $("#text_reply").attr("name") == data[i].login_id)
75
    {
76
      $("#"+data[i].username).addClass("active");
77
    }
78
  }
79
}
80
81
82
// For updating Sidebar
83
function SideBar(msg) {
84
  // Getting Div
85
  if (msg != null) {
86
    createSidebarElement(msg, "message");
87
  }
88
}
89
90
function toConversation() {
91
  $(".side").addClass("hide");
92
  $(".message").addClass("show");
93
  $(".lowerBar").addClass("show");
94
  $(".reply-emojis").addClass("hide");
95
  $(".reply-recording").addClass("hide");
96
}
97
98
function toSidebar() {
99
  $(".side").removeClass("hide");
100
  $(".message").removeClass("show");
101
  $(".lowerBar").removeClass("show");
102
  $(".reply-emojis").removeClass("hide");
103
  $(".reply-recording").removeClass("hide");
104
}
105
106
function width() {
107
  if (window.innerWidth < 768) {
108
    return true;
109
  }
110
  return false;
111
}
112
113
// Creating new Conversation or Loading Conversation
114
function newConversation(element, load)
115
{
116
117
  if(width())
118
  {
119
    toConversation();
120
  }
121
122
  var msg = {
123
    "username": element.id,
124
    "load": load,
125
    "type": "Initiated"
126
  };
127
  sendTo(msg);
128
}
129
130
// Set Details
131
function setConversationDetails(details)
132
{
133
  $("#conversationHeading").html("");
134
135
  var headingEle = $("<div></div>").addClass("col-sm-2 col-md-1 col-xs-3 heading-avatar");
136
  var headingAva = $("<div></div>").addClass("heading-avatar-icon");
137
  var headingImg = $("<img>").attr({"src" : "../public/assests/img/ankit.png"});
138
  headingAva.append(headingImg);
139
  headingEle.append(headingAva);
140
141
  var headingEleName = $("<div></div>").addClass("col-sm-8 col-xs-7 heading-name");
142
  var headingNameMeta = $("<a></a>").addClass("heading-name-meta").text(details.name);
143
  headingNameMeta.attr({
144
    "href": location.href.substring(0, location.href.lastIndexOf("/") + 1) + "account.php/" + details.username
145
  });
146
  var headingOnline = $("<span></span>").addClass("heading-online");
147
  headingOnline.text("");
148
  if (details.login_status === "1") {
149
    headingOnline.text("Online");
150
  }
151
  headingEleName.append(headingNameMeta);
152
  headingEleName.append(headingOnline);
153
154
  var headingDot = $("<div></div>").addClass("col-sm-1 col-xs-1  heading-dot pull-right");
155
  var headingDotIcon = $("<i></i>").addClass("fa fa-ellipsis-v fa-2x  pull-right").attr({"aria-hidden" : "true"});
156
  headingDot.append(headingDotIcon);
157
158
159
  $("#conversationHeading").append(headingEle);
160
  $("#conversationHeading").append(headingEleName);
161
  $("#conversationHeading").append(headingDot);
162
163
  $("#text_reply").attr({
164
    "name": details.id
165
  });
166
}
167
168
169
// Update Current Conversation
170
function updateConversation(data)
171
{
172
173
  var ele = document.getElementById("conversation");
174
  ele.innerHTML = "";
175
176
  if (data[0].type === 1)
177
  {
178
    // For showing previous message
179
    if (data[0].load > 10)
180
    {
181
      var divE1 = $("<div></div>").addClass("row message-previous");
182
      var divE2 = $("<div></div>").addClass("col-sm-12 previous");
183
      var aElement = $("<a></a>").text("Show Previous Message!");
184
      aElement.attr({
185
        "id": data[0].username,
186
        "name": data[0].load
187
      });
188
      divE2.append(aElement);
189
      divE1.append(divE2);
190
      $("#conversation").append(divE1);
191
    }
192
    var noOfMessages = data.length - 1;
193
    for (var i = noOfMessages; i >= 1; i--) {
194
      // create element
195
      var divElement1 = $("<div></div>").addClass("row message-body");
196
      var divElement2 = $("<div></div>").addClass("col-sm-12");
197
      var divElement3 = $("<div></div>");
198
      var messageText = $("<div></div>").addClass("message-text").text(data[i].message);
199
      var spanElement = $("<span></span>").addClass("message-time pull-right").text(data[i].time);
200
201
      if (data[i]["sent_by"] !== data[i].start)
202
      {
203
       divElement2.addClass("message-main-receiver");
204
       divElement3.addClass("receiver");
205
      }
206
      else
207
      {
208
        divElement2.addClass("message-main-sender");
209
       divElement3.addClass("sender");
210
      }
211
      divElement3.append(messageText);
212
      divElement3.append(spanElement);
213
      divElement2.append(divElement3);
214
      divElement1.append(divElement2);
215
      $("#conversation").append(divElement1);
216
    }
217
218
    if(noOfMessages < 21)
219
    {
220
      ele.scrollTop = ele.scrollHeight;
221
    }
222
    else
223
    {
224
      ele.scrollTop = $("#conversation")[0].scrollHeight - heightFrom;
0 ignored issues
show
Bug introduced by
The variable heightFrom seems to be never declared. If this is a global, consider adding a /** global: heightFrom */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
225
    }
226
  }
227
  setConversationDetails(data[0]);
228
}
229
230
// For reply to other messages
231
function reply() {
232
233
  var message = [$("#text_reply").val()];
234
  var id = $("#text_reply").attr("name");
235
  $("#text_reply").val("");
236
  // console.log(message);
237
  var msg = {
238
    "name": id,
239
    "reply": message,
240
    "type": "reply"
241
  };
242
  sendTo(msg);
243
}
244
245
function notFound(eleId)
246
{
247
  eleId = "#"+eleId;
248
  $(eleId).text("");
249
  var divElement = $("<div></div>").addClass("notFound").text("Not Found");
250
  $(eleId).append(divElement);
251
}
252
253
function composeChoose() {
254
  var text = document.getElementById("composeText").value;
255
  if (text !== "")
256
  {
257
    var msg =
258
    {
259
      "value": text,
260
      "type": "Compose"
261
    };
262
    sendTo(msg);
263
  }
264
  else
265
  {
266
    $("#compose").html("");
267
  }
268
}
269
270
//compose messages
271
function composeResult(arr)
272
{
273
  var ele = document.getElementById("compose");
274
  ele.innerHTML = "";
275
276
  if (arr !== "Not Found")
277
  {
278
    createSidebarElement(arr, "compose");
279
  }
280
  else
281
  {
282
    notFound("compose");
283
  }
284
}
285
286
function searchChoose() {
287
  var text = $("#searchText").val();
288
  if (text !== "") {
289
    var msg = {
290
      "value": text,
291
      "type": "Search"
292
    };
293
294
    sendTo(msg);
295
  }
296
  else
297
  {
298
    sidebarRequest();
299
  }
300
301
}
302
303
function searchResult(arr) {
304
  if (arr !== "Not Found") {
305
    createSidebarElement(arr, "message");
306
  }
307
  else
308
  {
309
    notFound("message");
310
  }
311
312
}
313
314
// Load previous messages
315
function previous(element)
316
{
317
  var user = element.id;
0 ignored issues
show
Unused Code introduced by
The variable user seems to be never used. Consider removing it.
Loading history...
318
  var lo = element.name;
319
  heightFrom = $("#conversation")[0].scrollHeight;
0 ignored issues
show
Bug introduced by
The variable heightFrom seems to be never declared. Assigning variables without defining them first makes them global. If this was intended, consider making it explicit like using window.heightFrom.
Loading history...
320
  newConversation(element, lo);
321
}
322
323
function hideComposeScreen() {
324
  $(".side-two").css({
325
    "left": "-100%"
326
  });
327
}
328
329
// Audio Recognization
330
331
function startDictation() {
332
333
  if (window.hasOwnProperty("webkitSpeechRecognition")) {
334
335
    var recognition = new webkitSpeechRecognition();
0 ignored issues
show
Bug introduced by
The variable webkitSpeechRecognition seems to be never declared. If this is a global, consider adding a /** global: webkitSpeechRecognition */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
Coding Style Best Practice introduced by
By convention, constructors like webkitSpeechRecognition should be capitalized.
Loading history...
336
337
    recognition.continuous = false;
338
    recognition.interimResults = false;
339
340
    recognition.lang = "en-IN";
341
    recognition.start();
342
343
    recognition.onresult = function(e) {
344
      document.getElementById("text_reply").value = e.results[0][0].transcript;
345
      recognition.stop();
346
      reply();
347
    };
348
349
    recognition.onerror = function() {
350
      recognition.stop();
351
    }
352
353
  }
354
}
355
356
357
// On Message
358
conn.onmessage = function(e)
359
{
360
  var msg = JSON.parse(e.data);
361
  // console.log(msg);
362
  if (!width())
363
  {
364
    SideBar(msg.sidebar);
365
  } else
366
  {
367
    if (!$(".side").hasClass("hide")) {
368
      SideBar(msg.sidebar);
369
    }
370
  }
371
372
  if (typeof(msg.initial) !== "undefined") {
373
    SideBar(msg.initial);
374
  }
375
376
  if (typeof(msg.conversation) !== "undefined") {
377
    updateConversation(msg.conversation);
378
  }
379
380
  if (typeof(msg.reply) !== "undefined") {
381
    var textAreaId = $("#text_reply").attr("name");
382
    if (msg.reply[0].id === textAreaId) {
383
      updateConversation(msg.reply);
384
    }
385
  }
386
387
  if (typeof(msg.Search) !== "undefined") {
388
    searchResult(msg.Search);
389
  }
390
391
  if (typeof(msg.Compose) !== "undefined") {
392
    composeResult(msg.Compose);
393
  }
394
};
395
396
// Event Listeners
397
$(document).ready(function(){
398
  $("body").on("click", ".sideBar-body", function() {
399
    newConversation(this,20);
400
    hideComposeScreen();
401
  });
402
403
  $("body").on("click", ".reply-send",
404
   function() {
405
    reply();
406
  });
407
408
  $("body").on("click", ".reply-recording",
409
   function() {
410
    startDictation();
411
  });
412
413
  $("body").on("click", ".lowerBar-recording",
414
   function() {
415
    startDictation();
416
  });
417
418
  $("body").on("click", ".lowerBar-back",
419
   function() {
420
    toSidebar();
421
    sidebarRequest();
422
  });
423
424
  $("body").on("click", ".previous a",
425
   function() {
426
    previous(this);
427
  });
428
429
  $("body").on("keyup", "#searchText",
430
   function() {
431
    searchChoose();
432
  });
433
434
  $("body").on("keyup", "#composeText",
435
   function() {
436
    composeChoose();
437
  });
438
439
  $(".heading-compose").click(function() {
440
    $(".side-two").css({
441
      "left": "0"
442
    });
443
  });
444
445
  $(".newMessage-back").click(function() {
446
    hideComposeScreen();
447
  });
448
449
  $("#conversation").scroll(function() {
450
    var res = $(".message-previous").html();
451
    var scrollTop = $("#conversation").scrollTop();
452
    if(typeof(res) !== "undefined" && scrollTop < 100)
453
    {
454
      $(".previous a").click();
455
    }
456
  });
457
});
458
459
console.log("Hello, Contact me at [email protected]");
0 ignored issues
show
Debugging Code introduced by
console.log looks like debug code. Are you sure you do not want to remove it?
Loading history...